<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery写代码</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #000000;
				
			}
			
			.div1{
				width: 100%;
				text-align: center;
			}
			#div3>#in{
				border: 1px solid rosybrown;
				border-radius: 10px;
				outline: 0;
				text-align: center;
				width: 300px;
				height: 40px;
				font-size: 16px;
				font-weight: 1000;
				background-color: rgb(153,153,153);
				
			}
			#div3>#btn{
				background-color: orangered;
				border: 1px solid red;
				border-radius: 10px;
				height: 40px;
				border: 0;
				width: 80px;
				text-align: center;
				vertical-align: bottom;
			}
			
			#div2{
				margin-top: 40px;
				width: 390px;
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}
			#div2>div{
				width: 390px;
				height: 40px;
				margin-bottom: 10px;
				line-height: 40px;	
			}
			#div2>div>.c1{
				float: left;
				width: 80%;
				text-align: center;
				background-color: rgb(106,203,170);
			}
			#div2>div>.c2{
				width: 20%;
				float: right;
				text-align: center;
				height: 40px;
				outline: 0;
				border: 0;
				padding: 0;
				margin: 0;
				background-color: rgb(106,203,170);
			}
			
			
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2" class="div1">
				<div style="background-color: rgb(106,203,170);">
					<div class="c1">葡萄</div>
					<button class="c2">X</button>
				</div>
				
				<div style="background-color: rgb(106,203,170);">
					<div class="c1">香蕉</div>
					<button class="c2">X</button>
				</div>
				
				<div style="background-color: rgb(106,203,170);">
					<div class="c1">苹果</div>
					<button class="c2">X</button>
				</div>
			</div>
			<div id="div3" class="div1">
				<input type="text" name="in" id="in" value="" />
				<button id="btn">确定</button>
			</div>
		</div>
		
		<script type="text/javascript">
			btnNode = $('#btn')
			showNode = $('#div2')
			btnNode.on('click',function(){

				inputNode = $('#in')
				content = inputNode.val()
				// 判断是否为空
				if(content==''){
					return
				}else{

					divNode = $('<div><div class="c1">'+ content + '</div>'+'<button class="c2">X</button></div>')
					showNode.append(divNode)
					inputNode.val('')
				}
			})	
			
			showNode.on('click','.c2',function(){

				($(this).parent())[0].remove()
			})
		</script>
	</body>
</html>
